<template>
  <el-dialog
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    title="添加请假类型"
    width="30%"
    :close-on-click-modal="false"
    :visible.sync="md.state"
    @close="closeMd"
    v-if="md.state"
  >
    <el-form :model="fm.ps" ref="formRef" :label-width="'100px'">
      <el-form-item
        label="姓名"
        prop="leaveUname"
        :rules="[
          { required: true, message: '请选择请假人姓名', trigger: 'blur' },
        ]"
      >
        <el-select
          filterable
          style="width: 100%"
          v-model="fm.ps.leaveUname"
          placeholder="请选择请假人姓名"
        >
          <el-option
            v-for="item in staffOptions"
            :key="item.baseUserId.uname"
            :label="item.baseUserId.realName"
            :value="item.baseUserId.uname"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="请假类型"
        prop="mainTypeId"
        :rules="[
          { required: true, message: '请选择请假类型', trigger: 'blur' },
        ]"
      >
        <el-select
          filterable
          @change="handleChange"
          v-model="fm.ps.mainTypeId"
          placeholder="请选择请假类型"
        >
          <el-option
            v-for="item in leaveParent"
            :key="item.id"
            :label="item.typeName"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button
          icon="el-icon-circle-plus"
          type="primary"
          style="margin-left: 10px"
          @click="handleOpenType"
          >添加类型
        </el-button>
      </el-form-item>
      <el-form-item
        prop="childTypeId"
        :rules="[
          { required: true, message: '请选择请假类型', trigger: 'blur' },
        ]"
      >
        <el-select
          filterable
          v-model="fm.ps.childTypeId"
          placeholder="请选择请假类型"
        >
          <el-option
            v-for="item in leaveChild"
            :key="item.id"
            :label="item.typeName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="请假时间"
        prop="time"
        :rules="[
          { required: true, message: '请选择请假时间', trigger: 'blur' },
        ]"
      >
        <el-date-picker
          style="width: 100%"
          v-model="fm.ps.time"
          type="datetimerange"
          range-separator="至"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          :picker-options="pickerOptions"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="事由"
        prop="leaveReason"
        :rules="[
          { required: true, message: '请输入请假事由', trigger: 'blur' },
        ]"
      >
        <el-input
          type="textarea"
          maxlength="500"
          show-word-limit
          :autosize="{ minRows: 3, maxRows: 7 }"
          placeholder="请输入请假事由"
          v-model="fm.ps.leaveReason"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          class="el-icon-success"
          type="primary"
          @click="onSubmit"
          :disabled="fm.sb.load"
          >{{ fm.sb.text }}
        </el-button>
        <el-button class="el-icon-error" @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="提示"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
      :before-close="handleClose"
    >
      <addLeaveType></addLeaveType>
    </el-dialog>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";
import { getStaffCombo } from "@/api/services/common.service";
import {
  getLeaveTypeDict,
  getLeaveMainDict,
} from "@/api/services/common.service";
import { addLeaveInfo } from "@/api/services/personMan.service";
import addLeaveType from "@/views/system-man/leave-type-list";

export default {
  name: "AddLeaveType",
  directives: { elDragDialog },
  props: ["state", "data"],
  components: { addLeaveType },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          const dd = new Date();
          dd.setDate(dd.getDate() - 1);
          return time < dd;
        },
      },
      dialogVisible: false,
      md: { state: this.state },
      fm: {
        fname: "addGroupFm",
        ps: {
          updId: "",
          leaveUname: "", // 请假人uname
          mainTypeId: "", // 请假主类型
          childTypeId: "",
          time: "",
          leaveStartTime: "", // 请假开始时间
          leaveEndTime: "", //请假结束时间
          leaveReason: "", // 请假原因
        },
        sb: {
          load: false,
          text: "添加",
        },
      },
      loading: false,
      staffOptions: [],
      leaveParent: [],
      leaveChild: [],
      leaveSourceData: [],
    };
  },
  created() {
    if (this.data) {
      const { id, profitDirection, typeName } = this.data;
      this.fm.ps = {
        pid: id,
        profitDirection,
        typeName,
      };
    }
    this._getDict();
  },
  methods: {
    _getDict() {
      getStaffCombo({ isContainDriver: 1 }).then((res) => {
        this.staffOptions = res.data;
      });
      getLeaveTypeDict({ find: "" }).then((res) => {
        const { data } = res;
        this.leaveSourceData = data;
        this.leaveParent = data.filter((item) => item.pid === 0);
      });
    },
    // 快速添加请假类型
    handleOpenType() {
      this.dialogVisible = true;
    },

    handleClose() {
      this._getDict();
      this.dialogVisible = false;
    },

    handleChange(data) {
      this.fm.ps.childTypeId = "";
      this.leaveChild = this.leaveSourceData.filter(
        (item) => item.pid === data
      );
    },

    /* 关闭弹框 */
    closeMd() {
      this.$emit("getMdState", false);
    },

    /**
     * 提交表单
     */
    onSubmit() {
      const { time } = this.fm.ps;
      if (time && time.length !== 0) {
        this.fm.ps.leaveStartTime = time[0];
        this.fm.ps.leaveEndTime = time[1];
      }
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.fm.sb.load = true; // 添加按钮禁用效果
          let loading = this.U.qloading("提交中，请稍后..."); // 添加遮
          addLeaveInfo(this.fm.ps)
            .then((res) => {
              this.fm.sb.load = false; // 取消按钮禁用效果
              this.U.qclose(loading); // 关闭遮罩
              if (!res || res.code !== 1) {
                this.U.qerror(res.msg);
              } else {
                this.U.qsuccess(res.msg);
                this.closeMd();
                this.$emit("reloadDg");
              }
            })
            .catch(() => {
              this.U.qclose(loading);
            });
        }
      });
    },
  },
};
</script>